<template>
  <div class="container_wrap">
    <header class="flex_column_between">
      <p>{{ multiLanguages("infomation") }}</p>
      <div class="card top_mian_content">
        <section class="left_section flex_column_between">
          <div>{{ multiLanguages("version") }} : {{ "10.0.5.14" }}</div>
          <div>{{ multiLanguages("uptime") }} : {{ "01d 04h 45m 39s" }}</div>
          <div>{{ multiLanguages("licensed_simultaneous_calls") }} : {{ "3" }}</div>
          <div>{{ multiLanguages("maintenance_expiry") }} : {{ "" }}</div>
          <div>{{ multiLanguages("active_calls") }} : {{ "0" }}</div>
        </section>
        <section class="right_section">
          <HomeDialog :multiLanguages="multiLanguages" />
        </section>
      </div>
    </header>
    <footer class="flex_column_between">
      <p class="bottom_text">{{ multiLanguages("call_statistics_in_day") }}</p>
      <div class="card bottom_mian_content">
        <HomeLine />
      </div>
    </footer>
  </div>
</template>
<script setup lang="ts">
import HomeDialog from "./HomeDialog.vue";
import HomeLine from "./HomeLine.vue";
const props = defineProps<{
  multiLanguages: any;
}>();
</script>
<style scoped lang="less">
.container_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  p {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
  }
  header {
    width: 97%;
    height: 30%;
    .top_mian_content {
      width: 100%;
      height: 89%;
      padding: 30px 40px;
      display: flex;
      section {
        height: 100%;
        width: 50%;
      }
      .right_section {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    }
  }
  footer {
    width: 97%;
    height: 50%;
    margin-top: 32px;
    .bottom_mian_content {
      width: 100%;
      height: 93%;
      padding: 0px 20px 20px;
    }
  }
}
</style>
